<template>
  <div class="new-list">
    <ul v-if="newsListData.length !== 0">
      <li class="news-list-item" v-for="(item) in newsListData" :key="item.id" @click="newsClick(item.id)">
        <h3 class="news-title" :class="{'clicked-news':item.isclick === true}" @click="goDetails(item.id)">{{item.title}}</h3>
        <p class="news-source" v-if="newType === 1">
            <a-tooltip>
              <template slot="title">新闻内容或标题最初始的描述或出处</template>
              本体：
              <span>新浪新闻</span>
            </a-tooltip>
            <a-tooltip>
              <template slot="title">最初始新闻与相似新闻的条数之和</template>
              聚合度：
              <span>52</span>
            </a-tooltip>
            <span>2020-07-30 08:10:56</span>
        </p>
        <p class="news-source new-list-mini" v-else>
            <span>来源：{{item.source}}</span>
            <span>{{item.pubdate}}</span>
        </p>
        <div class="news-introduce">
          <div v-if="item.imgs!==''" class="img-box">
             <img :src="item.imgs" alt v-if="newType === 1" />
             <img class="img-mini" :src="item.imgs" alt v-else />
              <p class="news-overview">{{item.content}}</p>
          </div>
          <p v-else class="news-overview" style="width:100%">{{item.content}}</p>
        </div>
      </li>
    </ul>
    <div class="empty" v-else>
      <a-empty></a-empty>
    </div>
  </div>
</template>

<script>
import { newsClick} from "@/api/networkHotspot";
export default {
  props: {
    newsList: {
      type: Array,
      default: () => [],
    },
    newType:{
        type:Number,
        default:1,
    }
  },
  methods: {
    goDetails(id) {
      const { href } = this.$router.resolve({
        path: `/console/configuration/newsDetail/index`,
        query: {
          id: id
        }
      });
      window.open(href, "_blank");
    },
    newsClick(id){
      newsClick(id).then((res)=>{
        console.log(res)
      })
      .catch((err) => {
        this.$message.destroy();
        this.$message.error(err);
      });
    }
  },
  data() {
    return {
      newsListData: [],
    };
  },
  watch: {
    newsList: {
      handler(newV) {
        this.newsListData = newV;
      },
      deep: true,
    },
  },
  mounted() {
    this.newsListData = this.newsList;
  },
};
</script>

<style lang="stylus" scoped>
.empty {
  margin-top:20px;
}
.new-list {
  .news-list-item {
    padding: 25px 0px;
    border-bottom: 1px solid #ececec;
    h3.clicked-news{
      color:#999
    }
    h3.clicked-news:hover {
      text-decoration: none;
      color: #999;
      text-decoration-color: #999;
    }
    .news-title {
      font-size: 18px;
      color: #333;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      width: 100%;
      font-weight: bold;
      cursor: pointer;
    }

    .news-title:hover {
      color: #144598;
    }

    .news-source {
      font-size: 14px;
      color: #656b90;
      cursor: pointer;

      span {
        margin-right: 20px;
      }
    }
    .new-list-mini {
        display: flex;
        justify-content:space-between;
    }
    .news-introduce {
      .img-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      img {
        width: 170px;
        height: 95px;
      }
      img.mini {
        width: 130px;
        height: 75px;
      }
      .news-overview {
        font-size: 15px;
        color: #333;
        line-height: 1.5;
        width: calc(100% - 195px);
        margin: 0;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>